<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PhoneList</title>
    <script src="../static/js/jquery-3.6.1.min.js"></script>
    <script src="../static/js/vue-2.6.10.min.js"></script>
    <script src="../static/js/axios.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/bootstrap-theme.min.css">
</head>
<style>
    .nav-two {
        font-size: 15px;
    }

    .redFont {
        color: red;
    }
</style>
<body>
<h1 style="text-align: center"></h1>
<div id="app" class="main container">
    <!-- 导航栏 -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="">PhoneList</a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="navbar-form navbar-left">
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div>
        <!-- 表格 -->
        <table class="table table-striped">
            <thead class="thead-dark">
            <tr>
                <th>No.</th>
                <th>品牌.</th>
                <th>型号</th>
                <th>像素</th>
                <th>操作系统</th>
                <th>CPU型号</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,i) in phoneList">
                <td>{{ i + 1 }}</td>
                <td>{{item.brand}}</td>
                <td>{{item.model}}</td>
                <td>{{ item.cameraPixel }}</td>
                <td>{{item.os}}</td>
                <td>{{item.cpuModel}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>

<footer class="bs-docs-footer">
    <div class="container">
        <ul class="bs-docs-footer-links">
            <li><a href="https://github.com/twbs/bootstrap">GitHub</a></li>
            <li><a href="https://twitter.com/getbootstrap">Twitter</a></li>
            <li><a href="/getting-started/#examples">实例</a></li>
            <li><a href="/about/">关于</a></li>
        </ul>

        <p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" rel="noopener" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" rel="noopener" target="_blank">@fat</a>. Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>

        <p>Code licensed <a href="https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE" rel="license noopener" target="_blank">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" rel="license noopener" target="_blank">CC BY 3.0</a>.</p>

    </div>
</footer>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            phoneList: [],
            taskTypeLabelList: ["单次", "每日"],
            showAdd: false,
            task: {},
            clearIntervalId: '',
            showMode: 1,
            index: 0
        },
        created: function () {
            this.queryNew();
        },
        methods: {
            //查询任务
            queryNew: function () {
                axios.get('indexPage').then((res) => {
                    let data = res.data.data;
                    this.phoneList = data;
                    console.log(data)
                });
            },
        }
    })
</script>
</html>